<head>
  <meta charset=UTF-8>
</head>
<body>
<div style="padding:20px">
  <div id="java">疯狂Java讲义</div>
  <div id="javaee">轻量级Java EE企业应用实战</div>
  <div id="ajax">疯狂前端开发讲义</div>
  <div id="xml">疯狂XML讲义</div>
  <div id="ejb">经典Java EE企业应用实战</div>
  <div id="android">疯狂Android讲义</div>
</div>
<script type="text/javascript" src="jquery-3.1.1.js">
</script>
<script type="text/javascript">
//将文档中id为java的元素和HTML字符串合并成一个jQuery对象
//将两个元素插在<body.../>元素的前面
$("#java").add("<p>新加的元素</p>").prependTo("body");
//获取id为ajax的节点的下一个兄弟节点，再将id为ajax的节点与此链为一体。
//实际返回id为ajax的节点，以及id为ajax的下一个节点
$("#ajax").next().addBack().css("border" , "2px solid black");
//先获取ajax节点的下一个节点，再次使用end()方法重新获取之前的ajax节点
//实际返回的就是$("#ajax")的结果
//$("#ajax").next().end().css("background-color" , "#ffaaaa");
$("#ejb").css("background-color" , "#ffaaaa");
</script>
</body>
